import React, { useEffect, useState } from 'react'
import { Button, Card, Drawer, Form, Input, message, Modal, Tag } from 'antd';
import styles from './style.less'
import { getClassList, getClassInfo, addClassInfo } from './service'
import ProTable from '@ant-design/pro-table';
import MPageContainer from '@/components/MPageContainer';
import qs from 'qs'
import { PlusOutlined } from '@ant-design/icons';

const Class: React.FC = () => {

    const [classList, setClassList] = useState([]);
    const [classInfo, setClassInfo] = useState(); // 看后端愿不愿意添加接口，不愿意算了
    const [addStudentVisvible, setAddStudentVisvible] = useState(false)
    const [addClassVisvible, setAddClassVisvible] = useState(false)
    const [classId, setClassId] = useState()

    const info: any = localStorage.getItem('info')
    const showInfo = JSON.parse(info);

    const { Item } = Form;
    const [classForm] = Form.useForm();

    const formLayout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 18 },
    };

    const getClassLists = async () => {
        const res = await getClassList()
        setClassList(res.data)
    }

    const getClassInfos = async (data: any) => {
        const res = await getClassInfo(data)
    }

    // 添加学生弹窗
    // const addStudent = (id: any) => {
    //     // console.log(id, 'idididid');
    //     setAddStudentVisvible(true);
    //     setClassId(id)
    // }

    // 添加班级弹窗
    const addClass = () => {
        console.log('添加班级');
        setAddClassVisvible(true);
    }

    // const handleAddStudentCancel = () => {
    //     setAddStudentVisvible(false);
    // }


    const handleAddClassCancel = () => {
        setAddClassVisvible(false);
    }

    // const handleAddStudentOk = async () => {
    //     const fieldsValue = await studentForm.validateFields();
    //     console.log(fieldsValue, 'fieldsValuefieldsValue');
    //     const student = { ...fieldsValue, classId: classId, userId: userId }
    //     const res = await addStudentIntoClass(qs.stringify(student))
    //     console.log(res, 'resresssssppppppp');
    //     if (res.code === 200) {
    //         message.success('添加成功')
    //     }
    //     setAddStudentVisvible(false);
    // }

    const handleAddClassOk = async () => {
        const fieldsValue = await classForm.validateFields();
        console.log(fieldsValue, 'fieldsValuefieldsValue');
        const classInfo = { ...fieldsValue }
        const res = await addClassInfo(qs.stringify(classInfo))
        console.log(res, 'resresssssppppppp');
        if (res.code === 200) {
            message.success('添加成功')
            getClassLists()
        }
        setAddClassVisvible(false);
    }

    useEffect(() => {
        getClassLists()
    }, [])

    const columns = [
        {
            title: '年级',
            dataIndex: 'year',
        },
        {
            title: '班级',
            dataIndex: 'specialty',
        },
        // {
        //     title: '操作',
        //     width: 180,
        //     render: (_: any, record: any) => {
        //         return <>
        //             <Tag color={'blue'} onClick={() => { getClassInfos(record.classId) }} className={styles.classTag}>查看班级</Tag>
        //         </>
        //     }
        // },
    ]


    return (
        <>
            <MPageContainer>
                <Card className={styles.card}>
                    <ProTable
                        headerTitle={<div className={styles.tag}><Tag color={'blue'}>班级信息</Tag></div>}
                        columns={columns as never[]}
                        dataSource={classList}
                        toolBarRender={() => [
                            <Button key="button" icon={<PlusOutlined />} type="primary" onClick={() => { addClass() }}>
                                添加班级
                            </Button>
                        ]}
                        search={false}
                        rowKey="classId"
                        pagination={{
                            showQuickJumper: true,
                        }}
                    />
                </Card>
            </MPageContainer>
            {/* {
                <Modal title="添加学生" visible={addStudentVisvible} onOk={handleAddStudentOk} onCancel={handleAddStudentCancel}>
                    <Form
                        {...formLayout}
                        form={studentForm}
                    >
                        <Item name="studentName" rules={[{ required: true }]} label="名字">
                            <Input size="large" placeholder="请输入名字" />
                        </Item>
                        <Item name="studentCode" rules={[{ required: true }]} label="学号">
                            <Input size="large" type="password" placeholder="请输入学号" />
                        </Item>
                    </Form>
                </Modal>
            } */}
            {
                <Modal title="添加班级" visible={addClassVisvible} onOk={handleAddClassOk} onCancel={handleAddClassCancel}>
                    <Form
                        {...formLayout}
                        form={classForm}
                    >
                        <Item name="year" rules={[{ required: true }]} label="年级">
                            <Input size="large" placeholder="请输入年级" />
                        </Item>
                        <Item name="specialty" rules={[{ required: true }]} label="班级">
                            <Input size="large" placeholder="请输入班级" />
                        </Item>
                    </Form>
                </Modal>
            }
        </>
    );
}

export default Class;
